{% extends "base.html" %}
{% load static %}

{% block title %}Articles for {{ year }}{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'fileinput/css/fileinput.min.css' %}"/>
    <style>
        .form-size {
            margin-left: auto;
            margin-right: auto;
        }

        .file-input-size {
            width: 1000px;
            height: 300px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
{% endblock %}
{% block content %}

    <div class="form-size">

        <h1>文件上传 </h1>
        <form enctype="multipart/form-data">
            <div class="form-group file-input-size">
                <div class="file-loading">
                    <input id="file-1" type="file" name="file" multiple class="file" data-overwrite-initial="false"
                           data-min-file-count="1"
                           data-theme="fas">
                </div>
            </div>
        </form>
    </div>

{% endblock %}
{% block js %}
    <script src="{% static 'fileinput/js/fileinput.min.js' %}"></script>
    <script src="{% static 'fileinput/js/locales/zh.js' %}"></script>
    <script src="{% static 'fileinput/js/plugins/piexif.min.js' %}"></script>
    <script>
        $("#file-1").fileinput({
            theme: 'fas',
            language: 'zh',
            uploadUrl: '{% url "upload" %}', // you must set a valid URL here else you will get an error
            uploadExtraData: {
                csrfmiddlewaretoken: '{{csrf_token}}',
            },
            minFileCount: 1,
            maxFileCount: 10,
            allowedFileExtensions: ['jpg', 'png', 'gif'],
            overwriteInitial: false,
            maxFileSize: 100000,
            maxFilesNum: 10,
            //allowedFileTypes: ['image', 'video', 'flash'],
            slugCallback: function (filename) {
                return filename.replace('(', '_').replace(']', '_');
            }
        }).on("fileuploaded", function (event, data, id, index) {
            alert(data['response']['message']);
            alert('上传成功')
        });
    </script>
{% endblock %}
